<template>
  <div class="background">
    <div class="login_container">
      <!-- <p>OA Management System</p> -->
      <!-- <Avatar  size="large" src="../assets/avatar.png" class="Avatar" /> -->
      <h1>米奇妙妙屋</h1>
      <Form
        :model="formItem"
        ref="formCustom"
        :label-width="10"
        :rules="ruleCustom"
        @keyup.enter.native="handleSubmit('formCustom')"
      >
        <FormItem prop="username" class="f1">
          <Input
            type="text"
            v-model="formItem.username"
            :class="{ 'apply-shake': flag }"
            placeholder="Username"
          >
            <Icon type="ios-person-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem prop="password">
          <!-- 动态绑定class shake 样式  -->
          <Input
            :class="{ 'apply-shake': flag }"
            type="password"
            v-model="formItem.password"
            placeholder="Password"
            password
          >
            <Icon type="ios-lock-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <div class="coderandom">
          <FormItem prop="code">
            <Input
              type="text"
              v-model="formItem.code"
              :class="{ 'apply-shake': flag }"
              placeholder="请输入验证码"
              class="ipt"
            >
              <Icon type="ios-lock-outline" slot="prepend"></Icon>
            </Input>
          </FormItem>
          <div v-html="CodeSvg" @click="InitCodeSvg()"></div>
        </div>
        <!-- 记住密码 -->
        <FormItem>
           <Checkbox v-model="single">Remeber the password</Checkbox>
           <span class="forget_btn" @click="modal1 = true"> Fogtten ?</span>
        </FormItem>
        <!-- 登录 -->
        <Button type="primary" @click="handleSubmit('formCustom')">登录</Button>
        <p class="target">Don't have an account? <span class="sign_btn" @click="modal2 = true">Sign up</span></p>
      </Form>
      <div class="beian">
      <a target="_blank" href="#" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
      <img src="https://mbdp01.bdstatic.com/static/landing-pc/img/icon_police.7296bdfd.png" style="float:left;"/>
      <p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 0px; color:#939393;">闽ICP备2022002804号</p></a>
      <span class="version">版本号:v {{Version}}</span>
    </div>
    </div>	
     <!-- 重置密码 -->
    <Modal
      title="Reset the password"
      v-model="modal1"
      :footer-hide="true"
      :mask-closable="false"
      class-name="vertical-center-modal"
      @on-cancel="handleClear()"
    >
    <Resetpass ref="Resetpass" @Close="Closepassword(val)"/>
    </Modal>
    <!-- 注册账号 -->
    <Modal
      title="Sign up"
      v-model="modal2"
      :footer-hide="true"
      :mask-closable="false"
      class-name="vertical-center-modal"
      @on-cancel="ClearSign()"
    >
    <Signup ref="Signup" @Backlogin="SigntoLogin(val)"/>
    </Modal>
  </div>
</template>

<script>
import Resetpass from "./Login_Components/Resetpass.vue"
import Signup from "./Login_Components/Signup.vue"
const Base64 = require("js-base64").Base64;
import Particle from "zhihu-particle";
import {
  Verificationcode,
  LoginSystem,
} from "@/request/api.js";
export default {
  data() {
    return {
      Version:"1.1.1",
      modal1: false,
      modal2:false,
      formItem: {
        username: "",
        password: "",
        code: "",
      },
      single: false,
      Trurcode: "",
      CodeSvg: "",
      flag: false,
      ruleCustom: {
        username: [
          {
            required: true,
            message: "please fill in the user name",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "please fill in the password",
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: "please fill code",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    handleClear(){
      this.$refs.Resetpass.handleReset();
    },
    ClearSign(){
      this.$refs.Signup.handleReset();
    },
    async InitCodeSvg() {
      const { data: res } = await Verificationcode();
      console.log("_", res);
      this.CodeSvg = res.data;
      this.Trurcode = res.text;
    },
    // login  validate
    //request
    handleSubmit(name) {
      this.$refs[name].validate(async (valid) => {
        if (valid) {
          if (this.formItem.code.toLowerCase() !== this.Trurcode.toLowerCase()) {
            this.$Message.error("验证码错误！！！");
            this.formItem.code = "", 
            this.InitCodeSvg();
            return;
          }
          if (this.single) {
            let password = Base64.encode(this.formItem.password);
            localStorage.setItem("username", this.formItem.username);
            localStorage.setItem("password", password);
          } else {
            localStorage.removeItem("username");
            localStorage.removeItem("password");
          }
          const { data: res } = await LoginSystem(this.formItem);
          if (res.code === 200) {
           this.$Message.success("登录成功！");
           window.sessionStorage.setItem("userEmail",this.formItem.username)
           this.sendMessage(res)
          } else {
            this.$Message.error("登录失败!请检查账号和密码否正确！");
            this.sendMessage(res)
          }
        } else {
          this.$Message.error("校验失败!");
          this.flag = true;
          setTimeout(() => {
            this.flag = false;
          }, 820);
        }
      });
    }, 
    /** 添加微前端登录判断方式 */
    sendMessage(res,err){
       if(window.self === window.top){
        const { username,password} = this.formItem
        const { role ,id,nickname,avatar,filename} = res
              window.sessionStorage.setItem('token',res.token);
              this.$store.dispatch('commitUserinfoasync',{username,password,role,id,nickname,avatar,fileName:filename})
              this.$router.push('/home');
       }else {
        window.parent.postMessage(
          {
            cmd: "send_token",
            params:{
              username:this.formItem.username,
              isSuccess:res.msg,
              token:res.token,
              nickname:res.nickname,
              avatar:res.avatar,
              role:res.role,
              id:res.id,
              err
            },
          },
          "*"
        );
       }
    },
    Closepassword(val){
      this.modal1 = val
    },
    SigntoLogin(){
      this.modal2 = false;
    }
  },
  components:{
    Resetpass,
    Signup
  },
  created() {
    // 验证码初始化
    this.InitCodeSvg();
  },
  mounted() {
    // DOM 渲染完成时  当记住密码回显表单
    let username = localStorage.getItem("username");
    if (username) {
      this.formItem.username = localStorage.getItem("username");
      this.formItem.password = Base64.decode(localStorage.getItem("password"));
      this.single = true;
    }
    new Particle(this.$el, { interactive: true, density: "low" });
  },
};
</script>

<style lang="less" scoped>
.background {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  overflow: hidden;
  // background-color: #1f1345;
  .login_container {
    padding: 30px;
    width: 420px;
    height: 500px;
    .Avatar {
      margin-bottom: 10px;
      width: 80px;
      height: 80px;
    }
    // border: 1px solid black;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
    display: flex;
    flex-direction: column;
    align-items: center;

    .coderandom {
      display: flex;
      justify-content: space-between;
      .ipt {
        width: 130px !important;
      }
    }
    .forget_btn {
      margin-left: 50px;
      text-decoration: underline;
      color: #2d8cf0;
      cursor: pointer;
    }
    .target {
      text-align: center;
      margin-top: 10px;
      .sign_btn {
        font-weight: bold;
        color: #2d8cf0;
        cursor: pointer;
      }
    }
    .ivu-btn {
      width: 300px;
      margin-left: 10px;
    }
    /deep/.ivu-input-group {
      width: 300px;
      .ivu-input {
        height: 40px;
      }
    }
    .beian {
       display: flex;
       width: 300px;
       margin-top: 200px;
       text-align: center;
       margin-left: 65px;
       .version {
          display: inline-block;
          margin-left: 10px;
       }
    }
  }
}



@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}
.apply-shake {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
// ::v-deep .ivu-input {
//     background-color: #1b263f !important;
//     border: none !important;
//     color: #515a6e !important;
//     font-weight: 400;
// }
// ::v-deep .ivu-input-group-prepend {
//   background-color: #1b263f !important;
//   border: none !important;
//   .ivu-icon{
//     font-weight: bold;
//     color: gray;
//   }
// }
</style>
